<!--图片上传组件-->
<template>
  <div class="shop-upload" :class="addImgFlag ? 'img-limit-mun' : ''">
    <el-upload 
      :action="imgUpurl"
      :multiple="true"
      :limit="limit"
      list-type="picture-card"
      :file-list="filelist"
      :disabled="disabled"
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
      :on-preview="handlePreview"
      :on-error="handleError"
      :on-exceed="handleExceed"
      :on-remove="handleRemove">
      <i class="el-icon-plus"></i>
      <div slot="tip">只能上传jpg/png文件，且不超过2M</div>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" style="text-align:center">
        <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
import UploadPicUrl, { DeletePic } from '@/api/requestConfig'
export default {
  props: {
    disabled: {
      type: Boolean,
      default: false
    }, // 是否禁用
    editId: Number, // 编辑时的id
    limit: Number, // 限制上传数量
    type: Number, // 分类Id
    filelist: Array // 图片展示列表
  },
  data() {
    return {
      imgUpurl: UploadPicUrl,
      dialogVisible: false, // 图片放大弹窗显示标记
      dialogImageUrl: '', // 图片放大弹窗图片url
      addImgFlag: false // 上传图片数量限制
    }
  },
  created() {
    if (!this.type) {
      this.$message.error('请加上图片类型参数')
    }
    this.imgUpurl = this.imgUpurl + '?type=' + this.type
  },
  methods: {
    // 获取图片
    // getImgUrlList() {
    // },
    // 上传成功
    handleSuccess(response, file, fileList) {
      console.log(file)
      this.returnOutput(fileList)
    },
    // 上传之前
    beforeUpload(file) {
      const isJPG = (file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif')
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) { this.$message.error('上传图片只能是 JPG PNG 格式!') }
      if (!isLt2M) { this.$message.error('上传图片大小不能超过 2MB!') }
      return isJPG && isLt2M
    },
    // 点击回调
    handlePreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 错误回调
    handleError(err, file, fileList) {
      if (err) this.$message.error(err.status)
    },
    // 超过限制回调
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制最多选择${this.limit}个文件`)
    },
    // 删除图片回调
    handleRemove(file, fileList) {
      console.log(file)
      var needData = {}
      if (file.response && file.response.data) {
        needData.picName = file.response.data
      } else {
        needData.picName = file.url
      }
      if (this.editId) {
        needData.id = this.editId
      }
      needData.type = this.type
      DeletePic(needData).then(res => {
        if (res.code === 200) {
          this.$message.success('删除成功')
          this.returnOutput(fileList)
        }
      })
    },
    // 返回输出
    returnOutput(fileList) {
      // 上传图片的加号
      if (this.limit && this.limit > 0) {
        if (fileList.length < this.limit) {
          this.addImgFlag = false
        } else {
          this.addImgFlag = true
        }
      }
      if (fileList && fileList.length > 0) {
        // 有无默认图
        // if (fileList[0].response) {
        //   this.$emit('geturl', fileList[0].response.data)
        // } else {
        //   var getArr = fileList[0].url.split('/')
        //   this.$emit('geturl', getArr[getArr.length - 1])
        // }
        this.$emit('geturl', fileList)
      } else {
        this.$emit('geturl', '')
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
 
</style>
